<template>
	<view class="order-container u-page">
		<u-sticky>
			<view class="bg-white">
				<view class="p-20">
					<u-search searchIconSize="32" placeholder="请输入单号" v-model="keyword" @search="search"
						@custom="search"></u-search>
				</view>
				<u-tabs @change="tabChange" :current="current" :list="tabList" :scrollable="false" lineColor="#FF3B26"
					lineWidth="120rpx" lineHeight="4rpx"></u-tabs>
			</view>
		</u-sticky>
		<view class="order-list">
			<view class="order-item" v-for="(item,index) in list" :key="`order-${item.id}`"
				@click="$go('/admin/order-detail/order-detail?id='+item.id+'&ordertype='+(3))">
				<view class="flex jus-b p-20 bg-white">
					<view class="flex jus-b ali-c">
						<u-icon name="order" class="text-primary" size="38" color="#ff3b26"></u-icon>
						<view class="flex-1 ml-10 text-lg">
							<view>订单号：{{ item.order_sn }}</view>
						</view>
					</view>
					<view class="text-primary">
						{{ item.status==1?'准备中':item.status==2?'配送中':item.status==3?'已到达':item.status==5?'售后退款中':item.status==7?'售后完成':item.status==4?'已取消':item.status==0?'待付款':''}}
					</view>
				</view>
				<view class="order-product" v-if="item.goods.length">
					<view class="order-product-item" v-for="good in item.goods">
						<view class="image">
							<image :src="good.url" mode="aspectFit" />
						</view>
						<view class="flex-1">
							<view class="line-two">{{good.goods_name || ''}}</view>
							<view class="flex jus-b mt-10 jus-b">
								<view>
									<text class="text-primary text-lgs">¥{{ good.goods_price || '0.00' }}</text>
									<text>/元</text>
								</view>
								<view class="flex ali-c">
									<u-icon name="close" size="26" color="#000"></u-icon>
									<text>{{ good.goods_num || '1' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="text-gray text-sm p-20 bg-white flex flex-col gap-10">
					<view class="flex">手机号：{{item.mobile||''}}</view>
					<view class="flex">下单时间：{{ item.addtime }}</view>
					<!-- <view>商品总数</view> -->
					<view class="text-lg flex jus-b">
						<text class="text-black">订单总价</text>
						<text class="text-primary">¥{{ item.total_money }}</text>
					</view>
					<view style="display: flex; align-items: center;">
						<view class="butbox" v-if="item.ref_status==0" @click.stop="handldexamine(list[index].ref_id)">
							审核
						</view>
					<!-- 	<view class="butbox" v-if="item.status==1" @click.stop="open(list[index])">
							确认发货
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="modelbox" >
				<view class="namebox">是否发货</view>
				<view class="inputbox">
					<view >快递单号：</view>
					<input v-model="take_num" placeholder="请输入快递单号"/>
				</view>
				<view  class="inputbox">
					<view >快递公司：</view>
					<picker :range="ship"  range-key="company_name"  @change="PickerChange">
						{{(ship[ship_id].id||ship_id)?ship[ship_id].company_name:'请选择快递公司'}}
					</picker>
				</view>
				<view class="butsbox">
					<view style=" color: #222222;border-top:solid  2rpx #EEEEEE;" @click="close()">取消</view>
					<view style="background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);"  @click="handldsent()">发货</view>
				</view>
			</view>
		</uni-popup>

		<view v-if="isEnd && !loading && !list.length" class="pt-30p">
			<u-empty mode="order" textSize="32" iconSize="200"> </u-empty>
		</view>

		<view class="py-30" v-if="!list.length && !isEnd">
			<u-loadmore fontSize="32" iconSize="32" :status="status" />
		</view>
		<adminBottomTab></adminBottomTab>
	</view>
</template>
<script>
	import adminBottomTab from "../../components/admin-bottom-tab.vue"
	import request from "../../utils/admin-request.js"
	export default {
		components: {
			adminBottomTab
		},
		data() {
			return {
				keyword: "",
				tabList: [{
						name: "全部",
						id: '',
					},
					{
						id: 1,
						name: "准备中",
					},
					{
						id: 2,
						name: "配送中",
					}, {
						id: 3,
						name: "已到达",
					},
					{
						id: 5,
						name: "待售后",
					},
				], //0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 为空默认全部
				current: 0,
				page: 1,
				loading: false,
				isEnd: false,
				list: [],
				order_type: '',
				info:{},
				ship:[],
				ship_id:null,
				take_num:'',
			}
		},
		computed: {
			status() {
				if (this.loading) return "loading"
				if (this.isEnd) return "nomore"
				if (!this.isEnd && this.loading) return "loadmore"
			},
		},
		onLoad(option) {
			this.order_type = option.order_type
			this.getList()
			this.getship()
		},
		onReachBottom() {
			this.getList()
		},

		methods: {
			init() {
				this.loading = false
				this.list = []
				this.isEnd = false
				this.page = 1
			},
			search() {
				this.init()
				this.getList()
			},
			tabChange(e) {
				this.init()
				this.current = e.index
				this.getList()
			},
			async getList() {
				if (this.loading || this.isEnd) {
					return
				}
				try {
					this.loading = true
					let {
						data
					} = await request({
						url: "/api/merch/orderList",
						data: {
							page_index: this.page,
							page_size: 20,
							status: this.tabList[this.current].id,
							keyword: this.keyword,
							order_type: 3 || this.order_type,
						},
					})
					this.list = [...this.list, ...data]
					if (data.length < 20) {
						this.isEnd = true
					}
					this.page += 1
				} finally {
					this.loading = false
				}
			},
			handldexamine(id) {
				console.log(id, 'item')
				uni.showModal({
					title: '提示',
					content: '确认审核改订单吗？',
					confirmText: '同意售后',
					cancelText: '拒绝售后',
					success: async (res) => {
						if (res.confirm) {
							await this.$http({
								url: 'api/merch/checkRefound',
								data: {
									id: id
								}
							}).then(mag => {
								uni.showToast({
									title: mag.msg,
									icon: 'none'
								})
								setTimeout(() => {
									this.search()
								}, 1500)
							})

						} else if (res.cancel) {
							await this.$http({
								url: 'api/merch/rejectRefound',
								data: {
									id: id
								}
							}).then(mag => {
								uni.showToast({
									title: mag.msg,
									icon: 'none'
								})
								setTimeout(() => {
									this.search()
								}, 1500)
							})
						}
					}
				});
			},
			open(item) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
				this.info = item
			},
			close(){
				this.$refs.popup.close()
				this.info = {}
				this.take_num =''
				this.ship_id = null
			},
			handldsent() {
				if(!this.take_num){
					uni.showToast({
						title:'请输入物流单号',
						icon:'none'
					})
					return
				}
				if(this.ship_id==null){
					uni.showToast({
						title:'请选择快递公司',
						icon:'none'
					})
					return
				}
				this.$http({
					url: 'api/merch/shipPost',
					data: {
						id: this.info.id,
						take_num:this.take_num,
						ship_id:this.ship[this.ship_id].id,
					}
				}).then(res=>{
					
				})
			},
			PickerChange(e){
				console.log(e,'e')
				this.ship_id = e.detail.value
			},
			getship(){
				this.$http({
					url:'api/merch/shipList'
				}).then(res=>{
					this.ship = res.data
				})
			}
		},
	}
</script>
<style lang="scss">
	.order-container {
		display: grid;

		.order-item {
			margin-top: 20rpx;
		}

		.order-list .order-item:first-child {
			margin-top: 0;
		}

		.order-product {
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.order-product-item {
				display: flex;
				align-items: flex-start;
				gap: 20rpx;

				.image {
					height: 170rpx;
					width: 170rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	.butbox {
		width: fit-content;
		height: 55rpx;
		line-height: 55rpx;
		padding: 0 20rpx;
		border: solid 2rpx #666666;
		border-radius: 26rpx;
		color: #222222;
		margin-right: 20rpx;
	}
	// 客服电话
	.modelbox{
		width: 690rpx;
		// height: 289rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		margin: 0 auto;
		padding-top: 30rpx;
		.namebox{
			width: 128rpx;
			margin: 0rpx auto 30rpx auto;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			background: linear-gradient(180deg, #FFF 70%, #ffebe7 100%);
		}
		.inputbox{
			width: 560rpx;
			height: 84rpx;
			padding: 0 20rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
		}
		.butsbox{
			display: flex;
			height: 78rpx;
			width: 690rpx;
			margin-top: 52rpx;
			background: linear-gradient(90deg, #F94D29 0%, #F99529 100%);
			>view{
				height: 78rpx;
				width: 345rpx;
				background-color: #FFF;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 78rpx;
			}
		}
	}
</style>